<!-- HTML结构 -->
<template>
    <div>
        <div id="toolbar-container"></div>
        <div id="editor">
            <p>这里是编辑器的内容。</p>
        </div>
    </div>
</template>

<script>
// 导入CKEditor解耦文档编辑器构建
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
import AxiosUploadAdapter from './AxiosUploadAdapter'
import "@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn.js";
export default {
    name: 'CustomEditor',
    data() {
        return {
            editor: DecoupledEditor,
            editorData: '<p>Content of the editor.</p>'
        };
    },
    mounted() {
        // 初始化编辑器
        DecoupledEditor
            .create(document.querySelector('#editor'), {
                // 配置编辑器的语言
                language: 'zh-cn',
                // 工具栏配置
                toolbar: {
                    items: [
                        'heading', '|',
                        'bold', 'italic', 'underline', 'strikethrough', '|',
                        'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|',
                        'link', 'bulletedList', 'numberedList', '|',
                        'alignment', '|',
                        'indent', 'outdent', '|',
                        'imageUpload', 'blockQuote', 'insertTable', 'mediaEmbed', '|',
                        'undo', 'redo'
                    ],
                    shouldNotGroupWhenFull: true
                },
                // 图片和表格的额外配置
                image: {
                    toolbar: [
                        'toggleImageCaption', 'imageTextAlternative',
                        'imageStyle:inline', 'imageStyle:alignLeft', 'imageStyle:alignRight', 'imageStyle:alignCenter', 'imageStyle:alignBlockLeft', 'imageStyle:alignBlockRight', 'imageStyle:block', 'imageStyle:side', 'imageStyle:wrapText', 'imageStyle:breakText', '|', 'insertImage', 'imageInsert', 'toggleImageCaption', 'resizeImage:original', 'resizeImage:25', 'resizeImage:50', 'resizeImage:75', 'resizeImage', 'imageResize', 'imageStyle:inline',
                        'imageTextAlternative'
                    ]
                },
                table: {
                    contentToolbar: [
                        'tableColumn', 'tableRow', 'mergeTableCells'
                    ]
                },
                // 字体大小和样式配置
                fontSize: {
                    options: [10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36]
                },
                fontFamily: {
                    options: [
                        'default', 'Arial, Helvetica, sans-serif', 'Courier New, Courier, monospace',
                        'Georgia, serif', 'Lucida Sans Unicode, Lucida Grande, sans-serif',
                        'Tahoma, Geneva, sans-serif', 'Times New Roman, Times, serif',
                        'Trebuchet MS, Helvetica, sans-serif', 'Verdana, Geneva, sans-serif'
                    ]
                },
                fontColor: {
                    colors: [
                        { color: 'hsl(0, 0%, 0%)', label: 'Black' },
                        { color: 'hsl(0, 0%, 30%)', label: 'Dim grey' },
                        { color: 'hsl(0, 0%, 60%)', label: 'Grey' },
                        { color: 'hsl(0, 0%, 90%)', label: 'Light grey' },
                        // 更多颜色...
                    ]
                },
                fontBackgroundColor: {
                    colors: [
                        { color: 'hsl(0, 75%, 60%)', label: 'Red' },
                        { color: 'hsl(30, 75%, 60%)', label: 'Orange' },
                        { color: 'hsl(60, 75%, 60%)', label: 'Yellow' },
                        { color: 'hsl(90, 75%, 60%)', label: 'Light green' },
                        // 更多颜色...
                    ]
                },
                // 更多配置...
            })
            .then(editor => {
                // 将工具栏附加到toolbar-container
                document.querySelector('#toolbar-container').appendChild(editor.ui.view.toolbar.element);
                // 自定义上传图片插件
                editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
                    return new AxiosUploadAdapter(loader, 'http://www.wcsoft.net/prod-api/common/upload');
                }
                console.log(editor.plugins.has('ImageToolbar'))
                // this.editor = editor;
                // 检查图片插件是否已启用
                if (editor.plugins.has('Image') && editor.plugins.has('ImageToolbar')) {
                    console.log('图片插件已启用');
                } else {
                    console.log('图片插件未启用');
                }
                // 监听selection变化
                editor.model.document.on('change', () => {
                    const selection = editor.model.document.selection;
                    const selectedElement = selection.getSelectedElement();

                    if (selectedElement && selectedElement.is('element', 'image')) {
                        console.log('图片已被选中');
                    } else {
                        console.log('当前没有图片被选中');
                    }
                });
                console.log(Array.from(editor.ui.componentFactory.names()))
            })
            .catch(error => {
                console.error('编辑器初始化出现问题。', error);
            });
    },
    beforeDestroy() {
        // 销毁编辑器实例
        if (this.editor) {
            this.editor.destroy();
        }
    }
}
</script>

<style scoped>
/* CSS样式 */
#toolbar-container {
    /* 工具栏样式 */
}

 /* 编辑器样式 */
 .ck-content {
     /* 编辑器内容样式 */
     min-height: 400px;
     border: 1px solid #ccc;
     background-color: white;
 }
</style>
